.bgcool{
  background-color: #1f242a;
  background-image: url("asfalt-light.png");
}

.cutmargin{
  width: 100%;
  clip-path: polygon(
    0 30px,
    100% 0,
    100% 100%,
    0 calc(100% - 30px)
  );
}

.cutmargin_bottom {
  width: 100%;
  clip-path: polygon(
    0 0,
    100% 0,
    100% 100%,
    0 calc(100% - 30px)
  );
}

.gallery {
  position: relative;
  width: 300px;
  height: 300px;
  margin: 50px 0px 130px 0px;  
}

.gallery-stack {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gallery-stack figure {
  margin: 0;
  padding: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  /*pointer-events: none;*/
}

.gallery-stack img, iframe{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: rotate(var(--rotation, 0deg));
  transition: transform 0.3s, z-index 0.3s;
  position: absolute;
}

.zindex99{
  z-index: 99;
}

.gallery-controls {
  position: absolute;
  top: 50%;
  width: 100%;
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%);
  padding: 0 20px;
  box-sizing: border-box;
  z-index: 99;
}

.gallery-controls button {
  background: rgba(255, 255, 255, 0.5);
  border: none;
  padding: 10px 15px;
  font-size: 20px;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.3s;
}


figure:nth-child(1) img, figure:nth-child(1) iframe { transform: rotate(-12.5deg); }
figure:nth-child(2) img, figure:nth-child(2) iframe { transform: rotate(-10deg); }
figure:nth-child(3) img, figure:nth-child(3) iframe { transform: rotate(-7.5deg); }
figure:nth-child(4) img, figure:nth-child(4) iframe { transform: rotate(-5deg); }
figure:nth-child(5) img, figure:nth-child(5) iframe { transform: rotate(-2.5deg); }
figure:nth-child(6) img, figure:nth-child(6) iframe { transform: rotate(0deg); }
figure:nth-child(7) img, figure:nth-child(7) iframe { transform: rotate(2.5deg); }
figure:nth-child(8) img, figure:nth-child(8) iframe { transform: rotate(5deg); }
figure:nth-child(9) img, figure:nth-child(9) iframe { transform: rotate(7.5deg); }
figure:nth-child(10) img, figure:nth-child(10) iframe { transform: rotate(10deg); }
figure:nth-child(11) img, figure:nth-child(11) iframe { transform: rotate(12.5deg); }
figure:nth-child(12) img, figure:nth-child(12) iframe { transform: rotate(10deg); }
figure:nth-child(13) img, figure:nth-child(13) iframe { transform: rotate(7.5deg); }
figure:nth-child(14) img, figure:nth-child(14) iframe { transform: rotate(5deg); }
figure:nth-child(15) img, figure:nth-child(15) iframe { transform: rotate(2.5deg); }
figure:nth-child(16) img, figure:nth-child(16) iframe { transform: rotate(0deg); }
figure:nth-child(17) img, figure:nth-child(17) iframe { transform: rotate(-2.5deg); }